<template>
  <div>
    <div style="margin-bottom: 10px;text-align: right;">
      <el-button type="primary" @click="dialogVisible = true">新建任务</el-button>
    </div>
    <el-table :data="qbList" border>
      <el-table-column prop="id" label="序号" :width="100"></el-table-column>
      <el-table-column label="领域列表">
        <template slot-scope="scope">
          {{ scope.row.dom_list.join('、') }}
        </template>
      </el-table-column>
      <el-table-column prop="total" label="漏洞总数" :width="100"></el-table-column>
      <el-table-column label="日志">
        <template slot-scope="scope">
          <i class="el-icon-document" @click="exportData(scope.row.id)" style="cursor: pointer;"></i>
        </template>
      </el-table-column>
      <el-table-column prop="state" label="状态" :width="100">
        <template slot-scope="scope">
          <template v-if="scope.row.state == 1">
            <i
              style="display: inline-block; background-color: #67C23A; width: 10px; height: 10px;border-radius: 50%;"></i>
            完成
          </template>
          <template v-else>
            <i
              style="display: inline-block; background-color: #909399; width: 10px; height: 10px;border-radius: 50%;"></i>
            等待
          </template>
        </template>
      </el-table-column>
      <el-table-column prop="jobTime" label="任务时间" :width="180"></el-table-column>
    </el-table>

    <!-- 分页 -->
    <div style="margin-top: 10px;">
      <el-pagination background layout="prev, pager, next" :page-count="qbTotalPages"
        @current-change="handlePageChange">
      </el-pagination>
    </div>

    <el-dialog title="新建任务" :visible.sync="dialogVisible" width="30%">
      <div>
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        <div style="margin: 15px 0;"></div>
        <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
          <el-checkbox v-for="city in cities" :label="city" :key="city">{{ city }}</el-checkbox>
        </el-checkbox-group>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveData()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
const cityOptions = ["机器学习", "人脸识别", "gpt", "人工智能", "计算机视觉", "自然语言处理", "深度学习", "语言模型"];

export default {
  data() {
    return {
      qbList: [],
      qbSearch: {
        pageNum: 1,
        pageSize: 10,
      },
      qbTotalPages: 0,
      dialogVisible: false,
      isIndeterminate: false,
      cities: cityOptions,
      checkAll: false,
      checkedCities: [],
    }
  },
  created() {
    this.getQbList()
  },
  methods: {
    // 获取情报列表
    async getQbList() {
      const res = await this.$http.postJson("/api/getAllLogDetail", this.qbSearch)
      if (res.code === 200) {
        this.qbList = res.data.content
        this.qbTotalPages = res.data.totalPages
      }
    },
    handleCheckAllChange(val) {
      console.log("val", val)
      this.checkedCities = val ? cityOptions : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
    },
    async saveData() {
      if (!this.checkedCities.length) {
        this.$message.warning("至少勾选1个")
        return
      }
      const res = await this.$http.postJson("/api/add_threat", {
        "dom_list": this.checkedCities
      })
      if (res.code === 200) {
        this.$message.success(res.message)
        this.dialogVisible = false
        this.checkedCities = []
        this.getQbList()
      }
    },
    // 分页导航
    handlePageChange(val) {
      this.qbSearch.pageNum = val
      this.getQbList();
    },
    async exportData(id) {
      let exportData
      const res = await this.$http.fetchGet('/api/getLogDetail', { id: id })
      if (res.code === 200) {
        exportData = res.data.all_log_data
      }
      if (!exportData) {
        this.$message.warning("无日志")
        return
      }
      const jsonStr = JSON.stringify(exportData, null, 2);
      const blob = new Blob([jsonStr], { type: 'application/json' });
      const url = URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      link.download = 'data.json';
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      URL.revokeObjectURL(url);
    },
  },
}
</script>